<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>geo-three</title><meta name="description" content="Documentation for geo-three"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base=".">
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
<div class="field">
<div id="tsd-toolbar-links"></div></div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">geo-three</a></div>
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<h2>geo-three</h2></div>
<div class="tsd-panel tsd-typography">
<a href="#geo-three" id="geo-three" style="color: inherit; text-decoration: none;">
  <h1>Geo-Three</h1>
</a>
<p><a href="https://badge.fury.io/js/geo-three"><img src="https://badge.fury.io/js/geo-three.svg" alt="npm version"></a><a href="https://badge.fury.io/gh/tentone%2Fgeo-three"><img src="https://badge.fury.io/gh/tentone%2Fgeo-three.svg" alt="GitHub version"></a>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Ftentone%2Fgeo-three?ref=badge_shield"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftentone%2Fgeo-three.svg?type=shield" alt="FOSSA Status"></a></p>
<ul>
<li>Library to display maps using <code>three.js</code>. Allows for full world scale visualization of geographic data using tile based chunks.</li>
<li>Can generate 3D geometry for terrain from terrain height data using software generated tiles or using GPU displacement maps.</li>
<li>Supports multiple maps service providers (<a href="https://www.microsoft.com/en-us/maps">BingMaps</a>, <a href="https://developers.google.com/maps/documentation">GoogleMaps</a>, <a href="https://developer.here.com/">HereMaps</a>, <a href="https://docs.mapbox.com/api/">MapBox</a>, <a href="https://www.maptiler.com/">MapTiler</a>, <a href="https://openmaptiles.org/">OpenMapTiles</a>, <a href="https://www.openstreetmap.org/">OpenStreetMaps</a>).<ul>
<li>Each one of these map providers require a developer account and a API configuration to be used.</li>
<li>Its possible to implement new provides using the <code>MapProvider</code> interface.</li>
<li>Providers should have a tile based map system to be supported by the library.</li>
</ul>
</li>
</ul>
<p><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/screenshot/b.png" width="380"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/screenshot/c.png" width="380"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/screenshot/e.png" width="380"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/screenshot/d.png" width="380"></p>

<a href="#example" id="example" style="color: inherit; text-decoration: none;">
  <h3>Example</h3>
</a>
<ul>
<li>You can test some live demos of the library running from the project page.</li>
<li>Some of these examples might require API keys for the map services used.<ul>
<li><a href="https://tentone.github.io/geo-three/examples/providers.html">Sandbox</a></li>
<li><a href="https://tentone.github.io/geo-three/examples/transition.html">Globe</a></li>
</ul>
</li>
</ul>

<a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
  <h3>Usage</h3>
</a>
<ul>
<li>To add the library to your project get the library trough NPM alongside with three.js and use it as a ES module.</li>
<li>You can also include the library directly in you webpage but ensure first that THREE is available globally.</li>
</ul>
<pre><code class="language-javascript"><span class="hl-0">// Create a map tiles provider object</span><br/><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">provider</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">OpenStreetMapsProvider</span><span class="hl-2">();</span><br/><br/><span class="hl-0">// Create the map view and add it to your THREE scene</span><br/><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">map</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">MapView</span><span class="hl-2">(</span><span class="hl-3">MapView</span><span class="hl-2">.</span><span class="hl-5">PLANAR</span><span class="hl-2">, </span><span class="hl-3">provider</span><span class="hl-2">);</span><br/><span class="hl-3">scene</span><span class="hl-2">.</span><span class="hl-4">add</span><span class="hl-2">(</span><span class="hl-3">map</span><span class="hl-2">);</span><br/><br/><span class="hl-0">// By default coordinates are to meter, can be resized to kilometer</span><br/><span class="hl-3">map</span><span class="hl-2">.</span><span class="hl-3">scale</span><span class="hl-2">.</span><span class="hl-4">set</span><span class="hl-2">(</span><span class="hl-6">0.001</span><span class="hl-2">, </span><span class="hl-6">0.001</span><span class="hl-2">, </span><span class="hl-6">0.001</span><span class="hl-2">);</span>
</code></pre>

<a href="#coordinates" id="coordinates" style="color: inherit; text-decoration: none;">
  <h3>Coordinates</h3>
</a>
<ul>
<li>The project uses internally a XY <a href="https://epsg.io/900913">EPSG:900913</a> coordinate format to be compatible with the XYZ coordinates used in three.js</li>
<li>Use the <code>UnitsUtils</code> class to access the unit conversion methods for example to convert a latitude, longitude <a href="https://epsg.io/4326">WGS84</a> pair value to XY coordinates you can use the code bellow:</li>
</ul>
<pre><code class="language-javascript"><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">coords</span><span class="hl-2"> = </span><span class="hl-3">Geo</span><span class="hl-2">.</span><span class="hl-3">UnitsUtils</span><span class="hl-2">.</span><span class="hl-4">datumsToSpherical</span><span class="hl-2">(</span><span class="hl-6">40.940119</span><span class="hl-2">, -</span><span class="hl-6">8.535589</span><span class="hl-2">);</span><br/><span class="hl-3">controls</span><span class="hl-2">.</span><span class="hl-3">target</span><span class="hl-2">.</span><span class="hl-4">set</span><span class="hl-2">(</span><span class="hl-3">coords</span><span class="hl-2">.</span><span class="hl-3">x</span><span class="hl-2">, </span><span class="hl-6">0</span><span class="hl-2">, -</span><span class="hl-3">coords</span><span class="hl-2">.</span><span class="hl-3">y</span><span class="hl-2">);</span>
</code></pre>

<a href="#tile-loading" id="tile-loading" style="color: inherit; text-decoration: none;">
  <h3>Tile Loading</h3>
</a>
<ul>
<li><p>Tiles are fetched from the service API configured, each one of the services requires specific configuration using the specific <code>MapProvider</code> object.</p>
</li>
<li><p>Base tiles are always loaded at the beginning of the process, then each frame a couple of rays are casted into the tile tree. The number of rays can be configured using the <code>MapView</code> <code>subdivisionRays</code> attribute.</p>
</li>
<li><p>The distance of the ray to the camera is used to define if the node needs to simplified or sub-divided. These values can be configured using the <code>thresholdUp</code> and <code>thresholdDown</code> values.</p>
<p>​</p>
</li>
</ul>
<img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/tiles.png" width="350">




<a href="#data-providers" id="data-providers" style="color: inherit; text-decoration: none;">
  <h3>Data Providers</h3>
</a>
<ul>
<li><p>The library has support for multiple data providers that must be configured beforehand. Most of these data providers rely on external API that differ from service to service.</p>
</li>
<li><p>Each one of them has its own provider object implementation of the <code>MapProvider</code> interface.</p>
</li>
<li><p>The <code>DebugProvider</code> provides information about the tiles loaded, shows the zoom level and the coordinates of the tile relative to the origin in that specific level.</p>
</li>
</ul>
<p><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/bing_sat.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/heremaps_sat.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/mapbox_sat.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/bing_vector.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/heremaps_vector.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/mapbox_vector.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/osm_vector.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/debug.png" width="270"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/providers/mapbox_height.png" width="270"></p>

<a href="#lod-control" id="lod-control" style="color: inherit; text-decoration: none;">
  <h3>LOD Control</h3>
</a>
<ul>
<li>The library includes multiple methods for LOD control, that define how tiles are subdivided or simplified.<ul>
<li>Raycast: uses ray casting determine the distance of the nodes to the camera view, it only considers the nodes inside of the view frustum. It uses random sampling and takes some time to pick all nodes to be subdivided but is overall faster.</li>
<li>Radial: Calculates the distance from the camera to each one of the nodes, the nodes closer are subdivided and nodes far away are simplified a simple and effective method that considers all nodes, and provides a more consistent result.</li>
<li>Frustum: Similar to the radial mode but only nodes inside of the view frustum are considered for subdivision.</li>
</ul>
</li>
<li>Custom <code>LODControl</code> can be implemented by extending the <code>LODControl</code> object and implementing the <code>updateLOD(view, camera, renderer, scene)</code> method.</li>
</ul>
<pre><code class="language-javascript"><span class="hl-7">export</span><span class="hl-2"> </span><span class="hl-1">class</span><span class="hl-2"> </span><span class="hl-8">DistanceLOD</span><span class="hl-2"> </span><span class="hl-1">extends</span><span class="hl-2"> </span><span class="hl-8">LODControl</span><br/><span class="hl-2">{</span><br/><span class="hl-2">    </span><span class="hl-1">constructor</span><span class="hl-2">() {</span><span class="hl-1">super</span><span class="hl-2">();}</span><br/><br/><span class="hl-2">    </span><span class="hl-4">updateLOD</span><span class="hl-2">(</span><span class="hl-3">view</span><span class="hl-2">, </span><span class="hl-3">camera</span><span class="hl-2">, </span><span class="hl-3">renderer</span><span class="hl-2">, </span><span class="hl-3">scene</span><span class="hl-2">)</span><br/><span class="hl-2">    {</span><br/><span class="hl-2">        </span><span class="hl-0">// Get world position of the camera.</span><br/><span class="hl-2">        </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">pov</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">Vector3</span><span class="hl-2">();</span><br/><span class="hl-2">        </span><span class="hl-3">camera</span><span class="hl-2">.</span><span class="hl-4">getWorldPosition</span><span class="hl-2">(</span><span class="hl-3">pov</span><span class="hl-2">);</span><br/><br/><span class="hl-2">        </span><span class="hl-3">view</span><span class="hl-2">.</span><span class="hl-4">traverse</span><span class="hl-2">(</span><span class="hl-1">function</span><span class="hl-2">(</span><span class="hl-3">node</span><span class="hl-2">)</span><br/><span class="hl-2">        {</span><br/><span class="hl-2">            </span><span class="hl-0">// Check if child in a MapNode</span><br/><span class="hl-2">            </span><span class="hl-7">if</span><span class="hl-2">(</span><span class="hl-3">node</span><span class="hl-2"> </span><span class="hl-1">instanceof</span><span class="hl-2"> </span><span class="hl-8">MapNode</span><span class="hl-2">)</span><br/><span class="hl-2">            {</span><br/><span class="hl-2">                </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">position</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">Vector3</span><span class="hl-2">();</span><br/><span class="hl-2">                </span><span class="hl-3">node</span><span class="hl-2">.</span><span class="hl-4">getWorldPosition</span><span class="hl-2">(</span><span class="hl-3">position</span><span class="hl-2">);</span><br/><span class="hl-2">                </span><br/><span class="hl-2">                </span><span class="hl-0">// Distance between camera and tile</span><br/><span class="hl-2">                </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">distance</span><span class="hl-2"> = </span><span class="hl-3">pov</span><span class="hl-2">.</span><span class="hl-4">distanceTo</span><span class="hl-2">(</span><span class="hl-3">position</span><span class="hl-2">);</span><br/><span class="hl-2">                </span><br/><span class="hl-2">                </span><span class="hl-0">// Normalize distance based on tile level</span><br/><span class="hl-2">                </span><span class="hl-3">distance</span><span class="hl-2"> /= </span><span class="hl-3">Math</span><span class="hl-2">.</span><span class="hl-4">pow</span><span class="hl-2">(</span><span class="hl-6">2</span><span class="hl-2">, </span><span class="hl-6">20</span><span class="hl-2"> - </span><span class="hl-3">node</span><span class="hl-2">.</span><span class="hl-3">level</span><span class="hl-2">);</span><br/><span class="hl-2">                </span><br/><span class="hl-2">                </span><span class="hl-0">// If closer than X subdivide</span><br/><span class="hl-2">                </span><span class="hl-7">if</span><span class="hl-2"> (</span><span class="hl-3">distance</span><span class="hl-2"> &lt; </span><span class="hl-6">50</span><span class="hl-2">)</span><br/><span class="hl-2">                {</span><br/><span class="hl-2">                    </span><span class="hl-3">node</span><span class="hl-2">.</span><span class="hl-4">subdivide</span><span class="hl-2">();</span><br/><span class="hl-2">                }</span><br/><span class="hl-2">                </span><span class="hl-0">// If far away, simplify parent</span><br/><span class="hl-2">                </span><span class="hl-7">else</span><span class="hl-2"> </span><span class="hl-7">if</span><span class="hl-2"> (</span><span class="hl-3">distance</span><span class="hl-2"> &gt; </span><span class="hl-6">200</span><span class="hl-2"> </span><span class="hl-3">node</span><span class="hl-2">.</span><span class="hl-3">parentNode</span><span class="hl-2">)</span><br/><span class="hl-2">                {</span><br/><span class="hl-2">                    </span><span class="hl-3">node</span><span class="hl-2">.</span><span class="hl-3">parentNode</span><span class="hl-2">.</span><span class="hl-4">simplify</span><span class="hl-2">();</span><br/><span class="hl-2">                }</span><br/><span class="hl-2">            }</span><br/><span class="hl-2">        });</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">}</span>
</code></pre>

<a href="#tiles-map-nodes" id="tiles-map-nodes" style="color: inherit; text-decoration: none;">
  <h3>Tiles Map Nodes</h3>
</a>
<ul>
<li><code>MapNode</code> objects are used to define how the tiles should be represented in the space. <code>MapNode</code> are organized hierarchically, every node implements the MapNode class that is based on the THREE.Mesh class (every map node has a visual representation as a mesh).</li>
<li>The library has support for both planar and spherical representation of tiles. Most providers only have planar tiles available.<ul>
<li>It is required that the tiles for spherical mode are previously adjusted, since planar tiles get more stretched as closer you get to the poles.</li>
</ul>
</li>
</ul>
<p><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/planar.png" width="350"><img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/spherical.png" width="350"></p>
<ul>
<li>There are available formats for GPU shader generated geometry using height data directly from the providers. <ul>
<li>GPU generated geometry is more dense, more detailed and a lot faster. But the final geometry used is not accessible for ray casting, so interaction with these geometries is limited.</li>
</ul>
</li>
<li>On the left the geometry was generated in CPU and on the right the geometry was displaced directly in the vertex shader.</li>
</ul>
<img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/shader.jpg" width="600">




<a href="#custom-data-providers" id="custom-data-providers" style="color: inherit; text-decoration: none;">
  <h3>Custom Data Providers</h3>
</a>
<ul>
<li>It is possible to create new data providers to access data other tile sources. New data sources have to provide access to the rasterized tile as a compatible DOM element (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement">Image</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement">Canvas</a>, ...)</li>
<li>Custom providers have to extend the base <code>MapProvider</code> class and implement the <code>fetchTile(zoom, x, y)</code> method that returns a <code>Promise</code> with access to the tile data.</li>
<li>Bellow is an implementation of a provider to access <a href="https://www.openstreetmap.org/">OpenStreetMaps</a> tile data using the <a href="https://wiki.openstreetmap.org/wiki/Tiles">Tile API</a> the provider simply loads the URL data into a image element.</li>
<li>These methods are called directly by nodes being loaded into the scene. These should be always asynchronous and should avoid any blocking actions.</li>
</ul>
<pre><code class="language-javascript"><span class="hl-7">export</span><span class="hl-2"> </span><span class="hl-1">class</span><span class="hl-2"> </span><span class="hl-8">OpenStreetMapsProvider</span><span class="hl-2"> </span><span class="hl-1">extends</span><span class="hl-2"> </span><span class="hl-8">MapProvider</span><br/><span class="hl-2">{</span><br/><span class="hl-2">    </span><span class="hl-1">constructor</span><span class="hl-2">(</span><span class="hl-3">address</span><span class="hl-2">) {</span><span class="hl-1">super</span><span class="hl-2">();}</span><br/><br/><span class="hl-2">    </span><span class="hl-4">fetchTile</span><span class="hl-2">(</span><span class="hl-3">zoom</span><span class="hl-2">, </span><span class="hl-3">x</span><span class="hl-2">, </span><span class="hl-3">y</span><span class="hl-2">)</span><br/><span class="hl-2">    {</span><br/><span class="hl-2">        </span><span class="hl-7">return</span><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-8">Promise</span><span class="hl-2">((</span><span class="hl-3">resolve</span><span class="hl-2">, </span><span class="hl-3">reject</span><span class="hl-2">) </span><span class="hl-1">=&gt;</span><br/><span class="hl-2">        {</span><br/><span class="hl-2">            </span><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-3">image</span><span class="hl-2"> = </span><span class="hl-3">document</span><span class="hl-2">.</span><span class="hl-4">createElement</span><span class="hl-2">(</span><span class="hl-9">&quot;img&quot;</span><span class="hl-2">);</span><br/><span class="hl-2">            </span><span class="hl-3">image</span><span class="hl-2">.</span><span class="hl-4">onload</span><span class="hl-2"> = </span><span class="hl-1">function</span><span class="hl-2">(){</span><span class="hl-4">resolve</span><span class="hl-2">(</span><span class="hl-3">image</span><span class="hl-2">);};</span><br/><span class="hl-2">            </span><span class="hl-3">image</span><span class="hl-2">.</span><span class="hl-4">onerror</span><span class="hl-2"> = </span><span class="hl-1">function</span><span class="hl-2">(){</span><span class="hl-4">reject</span><span class="hl-2">();};</span><br/><span class="hl-2">            </span><span class="hl-3">image</span><span class="hl-2">.</span><span class="hl-3">crossOrigin</span><span class="hl-2"> = </span><span class="hl-9">&quot;Anonymous&quot;</span><span class="hl-2">;</span><br/><span class="hl-2">            </span><span class="hl-3">image</span><span class="hl-2">.</span><span class="hl-3">src</span><span class="hl-2"> = </span><span class="hl-9">&quot;https://a.tile.openstreetmap.org/&quot;</span><span class="hl-2"> + </span><span class="hl-3">zoom</span><span class="hl-2"> + </span><span class="hl-9">&quot;/&quot;</span><span class="hl-2"> + </span><span class="hl-3">x</span><span class="hl-2"> + </span><span class="hl-9">&quot;/&quot;</span><span class="hl-2"> + </span><span class="hl-3">y</span><span class="hl-2"> + </span><span class="hl-9">&quot;.png&quot;</span><span class="hl-2">;</span><br/><span class="hl-2">        });</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">}</span>
</code></pre>
<ul>
<li>Tiles coordinates for each zoom level are counted from the left-top corner sequentially across the tiles.</li>
<li>Different API&#39;s might use different methods to index these tiles (e.g. <a href="https://docs.microsoft.com/en-us/bingmaps/articles/bing-maps-tile-system">Bing maps</a> uses a different indexing method).<ul>
<li>These coordinates need to be adapted to ensure correct loading when using this library.</li>
</ul>
</li>
</ul>
<img src="https://raw.githubusercontent.com/tentone/geo-three/master/readme/coords.png" width="600">

<ul>
<li>It is also possible to create fictional tiles without any external API to generate tiles by writing data directly into a canvas or even using a local image database to draw the map.</li>
<li>The code bellow shows how to implement a tile provided that draws a gradient from blue to red based on the zoom level of the tile with 16x16 pixels. This example can be used as basis for other code based tile generators.</li>
</ul>
<pre><code class="language-javascript"><span class="hl-7">import</span><span class="hl-2"> {</span><span class="hl-3">Color</span><span class="hl-2">} </span><span class="hl-7">from</span><span class="hl-2"> </span><span class="hl-9">&quot;three&quot;</span><span class="hl-2">;</span><br/><br/><span class="hl-7">export</span><span class="hl-2"> </span><span class="hl-1">class</span><span class="hl-2"> </span><span class="hl-8">BlueToRedProvider</span><span class="hl-2"> </span><span class="hl-1">extends</span><span class="hl-2"> </span><span class="hl-8">MapProvider</span><br/><span class="hl-2">{</span><br/><span class="hl-2">    </span><span class="hl-4">fetchTile</span><span class="hl-2">(</span><span class="hl-3">zoom</span><span class="hl-2">, </span><span class="hl-3">x</span><span class="hl-2">, </span><span class="hl-3">y</span><span class="hl-2">)</span><br/><span class="hl-2">    {</span><br/><span class="hl-2">        </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-5">canvas</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">OffscreenCanvas</span><span class="hl-2">(</span><span class="hl-6">16</span><span class="hl-2">, </span><span class="hl-6">16</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-5">context</span><span class="hl-2"> = </span><span class="hl-3">canvas</span><span class="hl-2">.</span><span class="hl-4">getContext</span><span class="hl-2">(</span><span class="hl-9">&#39;2d&#39;</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><br/><span class="hl-2">        </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-5">blue</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">Color</span><span class="hl-2">(</span><span class="hl-6">0x0000FF</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-5">red</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">Color</span><span class="hl-2">(</span><span class="hl-6">0xFF0000</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-5">color</span><span class="hl-2"> = </span><span class="hl-3">blue</span><span class="hl-2">.</span><span class="hl-4">lerpHSL</span><span class="hl-2">(</span><span class="hl-3">red</span><span class="hl-2">, (</span><span class="hl-3">zoom</span><span class="hl-2"> - </span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-3">minZoom</span><span class="hl-2">) / (</span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-3">maxZoom</span><span class="hl-2"> - </span><span class="hl-1">this</span><span class="hl-2">.</span><span class="hl-3">minZoom</span><span class="hl-2">));</span><br/><span class="hl-2">        </span><br/><span class="hl-2">        </span><span class="hl-3">context</span><span class="hl-2">.</span><span class="hl-3">fillStyle</span><span class="hl-2"> = </span><span class="hl-3">color</span><span class="hl-2">.</span><span class="hl-4">getStyle</span><span class="hl-2">();</span><br/><span class="hl-2">        </span><span class="hl-3">context</span><span class="hl-2">.</span><span class="hl-4">fillRect</span><span class="hl-2">(</span><span class="hl-6">0</span><span class="hl-2">, </span><span class="hl-6">0</span><span class="hl-2">, </span><span class="hl-6">16</span><span class="hl-2">, </span><span class="hl-6">16</span><span class="hl-2">);</span><br/><span class="hl-2">        </span><span class="hl-7">return</span><span class="hl-2"> </span><span class="hl-8">Promise</span><span class="hl-2">.</span><span class="hl-4">resolve</span><span class="hl-2">(</span><span class="hl-3">canvas</span><span class="hl-2">);</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">}</span>
</code></pre>

<a href="#custom-map-nodes" id="custom-map-nodes" style="color: inherit; text-decoration: none;">
  <h3>Custom Map Nodes</h3>
</a>
<ul>
<li>To implement a custom <code>MapNode</code> we can create a new class that extends the base implementation.</li>
<li>The objects created from the class should then be passed as argument to the <code>MapView</code> object that is responsible for managing its life cycle.</li>
<li>All map nodes are based on three.js <code>Mesh</code> object and have attached a Geometry and Material used to render them into the scene.</li>
<li>These materials and geometries can be customized and are not required to be of any specific type. It is recommended to reuse them as much as possible to save memory.</li>
</ul>
<pre><code class="language-javascript"><span class="hl-7">import</span><span class="hl-2"> {</span><span class="hl-3">SphereGeometry</span><span class="hl-2">, </span><span class="hl-3">MeshBasicMaterial</span><span class="hl-2">, </span><span class="hl-3">Vector3</span><span class="hl-2">} </span><span class="hl-7">from</span><span class="hl-2"> </span><span class="hl-9">&quot;three&quot;</span><span class="hl-2">;</span><br/><br/><span class="hl-0">// The MapNode inherits from three Mesh object and requires a geometry and material</span><br/><span class="hl-7">export</span><span class="hl-2"> </span><span class="hl-1">class</span><span class="hl-2"> </span><span class="hl-8">CustomMapNode</span><span class="hl-2"> </span><span class="hl-1">extends</span><span class="hl-2"> </span><span class="hl-8">MapNode</span><br/><span class="hl-2">{</span><br/><span class="hl-2">    </span><span class="hl-1">constructor</span><span class="hl-2">(</span><span class="hl-3">parentNode</span><span class="hl-2"> = </span><span class="hl-1">null</span><span class="hl-2">, </span><span class="hl-3">mapView</span><span class="hl-2"> = </span><span class="hl-1">null</span><span class="hl-2">, </span><span class="hl-3">location</span><span class="hl-2"> = </span><span class="hl-3">MapNode</span><span class="hl-2">.</span><span class="hl-5">ROOT</span><span class="hl-2">, </span><span class="hl-3">level</span><span class="hl-2"> = </span><span class="hl-6">0</span><span class="hl-2">, </span><span class="hl-3">x</span><span class="hl-2"> = </span><span class="hl-6">0</span><span class="hl-2">, </span><span class="hl-3">y</span><span class="hl-2"> = </span><span class="hl-6">0</span><span class="hl-2">)</span><br/><span class="hl-2">    {</span><br/><span class="hl-2">        </span><span class="hl-1">super</span><span class="hl-2">(</span><span class="hl-3">CustomMapNode</span><span class="hl-2">.</span><span class="hl-5">GEOMETRY</span><span class="hl-2">, </span><span class="hl-3">CustomMapNode</span><span class="hl-2">.</span><span class="hl-5">MATERIAL</span><span class="hl-2">, </span><span class="hl-3">parentNode</span><span class="hl-2">, </span><span class="hl-3">mapView</span><span class="hl-2">, </span><span class="hl-3">location</span><span class="hl-2">, </span><span class="hl-3">level</span><span class="hl-2">, </span><span class="hl-3">x</span><span class="hl-2">, </span><span class="hl-3">y</span><span class="hl-2">);</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">    </span><br/><span class="hl-2">    </span><span class="hl-1">static</span><span class="hl-2"> </span><span class="hl-3">GEOMETRY</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">SphereGeometry</span><span class="hl-2">(</span><span class="hl-6">0.5</span><span class="hl-2">, </span><span class="hl-6">32</span><span class="hl-2">, </span><span class="hl-6">32</span><span class="hl-2">); </span><br/><span class="hl-2">    </span><br/><span class="hl-2">    </span><span class="hl-1">static</span><span class="hl-2"> </span><span class="hl-3">MATERIAL</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">MeshBasicMaterial</span><span class="hl-2">();</span><br/><span class="hl-2">    </span><br/><span class="hl-2">    </span><span class="hl-0">// Base geometry applied to the map view.</span><br/><span class="hl-2">    </span><span class="hl-1">static</span><span class="hl-2"> </span><span class="hl-3">BASE_GEOMETRY</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">MapNodeGeometry</span><span class="hl-2">(</span><span class="hl-6">1</span><span class="hl-2">, </span><span class="hl-6">1</span><span class="hl-2">, </span><span class="hl-6">1</span><span class="hl-2">, </span><span class="hl-6">1</span><span class="hl-2">);</span><br/><span class="hl-2">    </span><br/><span class="hl-2">    </span><span class="hl-0">// Base scale is applied to the map view</span><br/><span class="hl-2">    </span><span class="hl-1">static</span><span class="hl-2"> </span><span class="hl-3">BASE_SCALE</span><span class="hl-2"> = </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">Vector3</span><span class="hl-2">(</span><span class="hl-3">UnitsUtils</span><span class="hl-2">.</span><span class="hl-5">EARTH_PERIMETER</span><span class="hl-2">, </span><span class="hl-6">1</span><span class="hl-2">, </span><span class="hl-3">UnitsUtils</span><span class="hl-2">.</span><span class="hl-5">EARTH_PERIMETER</span><span class="hl-2">);</span><br/><br/><span class="hl-2">    </span><span class="hl-4">initialize</span><span class="hl-2">() {</span><br/><span class="hl-2">        </span><span class="hl-0">// Method to initialize data of the node (e.g fetch assets)</span><br/><span class="hl-2">    }</span><br/><br/><span class="hl-2">    </span><span class="hl-4">createChildNodes</span><span class="hl-2">()</span><br/><span class="hl-2">    {</span><br/><span class="hl-2">        </span><span class="hl-0">// Method called on subdivision to craete child nodes</span><br/><span class="hl-2">    }</span><br/><span class="hl-2">}</span>
</code></pre>

<a href="#license" id="license" style="color: inherit; text-decoration: none;">
  <h3>License</h3>
</a>
<ul>
<li>Project uses a MIT license that allow for commercial usage of the platform without any cost.</li>
<li>The license is available on the project GitHub page</li>
</ul>
<p><a href="https://app.fossa.com/projects/git%2Bgithub.com%2Ftentone%2Fgeo-three?ref=badge_large"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftentone%2Fgeo-three.svg?type=large" alt="FOSSA Status"></a></p>
</div></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4><form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
<div class="tsd-accordion-details">
<ul>
<li class="current selected"><a href="modules.html">geo-<wbr/>three</a>
<ul></ul></li></ul></div></details></nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="tsd-kind-class"><a href="classes/BingMapsProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>Bing<wbr/>Maps<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/CancelablePromise.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Cancelable<wbr/>Promise</a></li>
<li class="tsd-kind-class"><a href="classes/CanvasUtils.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Canvas<wbr/>Utils</a></li>
<li class="tsd-kind-class"><a href="classes/DebugProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Debug<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/Geolocation.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Geolocation</a></li>
<li class="tsd-kind-class"><a href="classes/GeolocationUtils.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Geolocation<wbr/>Utils</a></li>
<li class="tsd-kind-class"><a href="classes/GoogleMapsProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Google<wbr/>Maps<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/HeightDebugProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Height<wbr/>Debug<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/HereMapsProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Here<wbr/>Maps<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/LODFrustum.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>LODFrustum</a></li>
<li class="tsd-kind-class"><a href="classes/LODRadial.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>LODRadial</a></li>
<li class="tsd-kind-class"><a href="classes/LODRaycast.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>LODRaycast</a></li>
<li class="tsd-kind-class"><a href="classes/MapBoxProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Box<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/MapHeightNode.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Height<wbr/>Node</a></li>
<li class="tsd-kind-class"><a href="classes/MapHeightNodeShader.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Height<wbr/>Node<wbr/>Shader</a></li>
<li class="tsd-kind-class"><a href="classes/MapNode.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Node</a></li>
<li class="tsd-kind-class"><a href="classes/MapNodeGeometry.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Node<wbr/>Geometry</a></li>
<li class="tsd-kind-class"><a href="classes/MapNodeHeightGeometry.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Node<wbr/>Height<wbr/>Geometry</a></li>
<li class="tsd-kind-class"><a href="classes/MapPlaneNode.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Plane<wbr/>Node</a></li>
<li class="tsd-kind-class"><a href="classes/MapProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/MapSphereNode.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Sphere<wbr/>Node</a></li>
<li class="tsd-kind-class"><a href="classes/MapSphereNodeGeometry.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Sphere<wbr/>Node<wbr/>Geometry</a></li>
<li class="tsd-kind-class"><a href="classes/MapTilerProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>Tiler<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/MapView.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Map<wbr/>View</a></li>
<li class="tsd-kind-class"><a href="classes/OpenMapTilesProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Open<wbr/>Map<wbr/>Tiles<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/OpenStreetMapsProvider.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Open<wbr/>Street<wbr/>Maps<wbr/>Provider</a></li>
<li class="tsd-kind-class"><a href="classes/QuadTreePosition.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Quad<wbr/>Tree<wbr/>Position</a></li>
<li class="tsd-kind-class"><a href="classes/TextureUtils.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Texture<wbr/>Utils</a></li>
<li class="tsd-kind-class"><a href="classes/UnitsUtils.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Units<wbr/>Utils</a></li>
<li class="tsd-kind-class"><a href="classes/XHRUtils.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>XHRUtils</a></li>
<li class="tsd-kind-interface"><a href="interfaces/LODControl.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>LODControl</a></li></ul></nav></div></div>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
<div class="overlay"></div><script src="assets/main.js"></script></body></html>